<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容只替换一次</title>
</head>

<body>
    <div id="change" class="change">
        <h1 data-once style="background-color: pink;">{{ info }}</h1>
    </div>

    <script>
        let info = "Hello, Vue"

        function func() {
            let element = document.querySelector("#change > h1")
            console.log(element);

            let attributeValue = element.getAttribute("data-once")
            console.log(typeof attributeValue);
            if (attributeValue === "") {
                element.textContent = info
            }

        }

        // func()

        // info += "!"
        // func()
        // info += "!"
        // func()

        let status = true
        function execute_once() {
            if (status) {
                func()
                status = !status
            }
        }

        info += "!"
        execute_once()

         info += "!"
        execute_once()
         info += "!"
        execute_once()
         info += "!"
        execute_once()

    </script>
</body>

</html>